[#ftl]
[#--include "../../util.ftl"/--]
	[@define "agile.form.ToggleButton" "agile.form.Button"]
		category:"ToggleButton Component"
		,widgetName:"ToggleButton"
		[#assign templateString][#compress]			
			<div class="agileComponent agileToggleButton">
				<span data-dojo-attach-point="delegate" data-dojo-type="dijit.form.ToggleButton">{parameters.label}</span>				
				<table data-dojo-attach-point="editorNode" style="display:none">
					<tr>
						 <td style='width:10px;'><div data-dojo-type='dijit.form.CheckBox' value='{parameters.checked}' data-dojo-attach-point='checkBoxIcon' ></div></td>
						 <td align='left'><div data-dojo-type='dijit.InlineEditBox' data-dojo-attach-point='label'>{parameters.label}</div></td>						
					</tr>
				</table>				
			</div>
		[/#compress][/#assign]
		,templateString:"${templateString?js_string}"
			
		,attributes : agile.delegate(agile.form.Button.prototype.attributes,{
			"checked":lang.mixin({},agile.BooleanMetadata,{
				onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){										
					widget.delegate.reset1(name,value);	
					widget.metadata(this.metadataCategory+"."+name,value);
					widget.checkBoxIcon.reset1("value",value);
				}
			})	
			,iconClass:{_hidden:true}	
		})
		,constructor: function(){	
			 this.metadata("parameters.iconClass","dijitCheckBoxIcon");
			 this.metadata("parameters.label","Click me!");
			 this.metadata("parameters.showLabel",true);
			 this.metadata("parameters.checked",true);
		}

		,init:function(){
//			this.inherited("onStartup",arguments);
			this.delegate.set("iconClass",this.metadata("parameters.iconClass"));
			this.delegate.set("checked",this.metadata("parameters.checked"));
				
			this.checkBoxIcon.on("change",lang.hitch(this,function(newValue){
				this.delegate.set("checked",newValue);//dummy,editorName,value,attrName
				topic.publish("agile.widget.changed","","checked",newValue);					
				this.metadata("parameters.checked",newValue);
			}));						
		}
	[/@]	
	 